<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../assets/flexible/flexible.debug.js" type="text/javascript" charset="utf-8"></script>
    <link rel="stylesheet" type="text/css" href="../css/reset.css" />
    <link rel="stylesheet" type="text/css" href="../assets/swiper/css/swiper.min.css" />
    <!-- <link rel="stylesheet" type="text/css" href="../font-awesome-4.7.0/css/font-awesome.min.css"/> -->
    <link rel="stylesheet" type="text/css" href="../css/car.css" />
</head>

<body>
    <div class="box">
        <section class="header">
        	<img src="../images/03_01.png"/>
        </section>
        <p>您的购物车是空的<br>快给家人挑几件喜欢的商品吧～</p>
        <a href="../index.html"><button class="btn">开始选购</button></a>
    </div>

    <!-- 您可能还需要 -->
    <div id="title">
    	您可能还需要
    </div>
    <div class="mustbuy">
        <script type="text/html" id="template">
            {{each str v}}
	            <a href="html/details.html">
	                <section class="active">
	                     <img class="big" src="{{v.img}}">
	                     <p>{{v.p}}</p>
	                     <span>{{v.sp}}</span>
	                     <img class="small" src="../images/car.png"/>
	                </section>
	            </a>
            {{/each}}
        </script>
    </div>


    <!-- 底部导航 -->
    <footer class="footer">
        <a href="../index.html">
            <dl class="on">
                <dt>
                    <img src="../images/home_before.png">
                </dt>
                <dd>
                    推荐
                </dd>
            </dl>
        </a>
        <a href="../html/shopping.html">
            <dl>
                <dt>
                    <img src="../images/class_before.png">
                </dt>
                <dd>
                    逛
                </dd>
            </dl>
        </a>

        <a href="#">
            <dl>
                <dt>
                    <img src="../images/shopcar_after.png">
                </dt>
                <dd>
                    购物车
                </dd>
            </dl>
        </a>

        <a href="../html/my.html">
            <dl>
                <dt>
                    <img src="../images/mine_before.png">
                </dt>
                <dd>
                    我的
                </dd>
            </dl>
        </a>
    </footer>

    <script src="../assets/jquery/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/swiper/js/swiper.jquery.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="../assets/artTemplate/template-web.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/javascript">
        jQuery(function ($) {
            $.ajax({
                type: "GET",
                url: "../json/car.json",
                dataType: 'json',
                success: function (data) {
                    var arr = template('template', {
                        str: data
                    });
                    $('.mustbuy').html(arr);
                    console.log(arr);
                }
            })
        })
    </script>
</body>

</html>